<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .header {
            top: 0px; /*距离最上面0像素*/
            position: fixed; /*向下滚动时不固定在最上面*/
            width: 100%;
            height: 103px;
            border-bottom: 4px solid #ED435B;
            background-color: white;
        }

        .header .head {
            width: 1200px;
            height: 105px;
            /*background-color: black;*/
            margin: 0 auto;
            position: relative;     /*相对定位 relative“相对于”元素在文档中的初始位置*/
        }

        .header .head img {
            width: 180px;
            margin: 21px 0;
        }

        .header .head ul{
            list-style: none;
            right: 60px;
            position: absolute;     /*绝对定位 相对于”最近的已定位祖先元素，*/
            height: 20px;
            top: 50%;
            margin-top: -10px;
            font-size: 18px;
            line-height: 20px;
            background-color: #A9a9a9;
            /*right: 60px;*/
        }
        .header .head ul li{
            float: left;
            border-right: 1px solid #6c6c6c;
        }

        .header .head ul li:first-child span{
            margin-left: 0;
        }

        .header .head ul li:last-child{
            /*margin-right: 0;*/
            border: none;
        }

        .header .head ul li:last-child span {
            margin-right: 0;
        }
        .header .head ul li span{
            color: #6c6c6c;
            margin: 15px;
        }

        .header .head ul li a{
            text-decoration: none;
        }

        .body {
            margin-top: 107px; /*外边距,距离顶部107像素，因为上面一条的高度时103加上边框4等于107px*/
            height: 550px;
            background-color: white;
        }

        .body1 {
            height: 550px;
            background-color: red;
        }

        .body2 {
            height: 550px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div class="header">
    <div class="head">
        <a href="#">
            <img src="pdd_logo_v2.png">
        </a>
        <ul>
            <li>
                <a href="#">
                    <span>首页</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span>商家入驻</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span>热点资讯</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span>社会招聘</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span>校园招聘</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span>招采平台</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span>帮助中心</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span>举报平台</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span>分享赚钱</span>
                </a>
            </li>

        </ul>
    </div>
</div>
<div class="body"></div>
<div class="body1"></div>
<div class="body2"></div>
<div class="body"></div>
<div class="body1"></div>
<div class="body2"></div>
</body>
</html>